/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-28 Time: 23:01
 *
 */

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';
import PropTypes from 'prop-types';
import {COLOR_THEME, COLOR_WHITE, FONT_COLOR_TITLE} from "../../../../constant/PHColors"

export default class GoodsAndCountView extends Component {

  static propTypes = {
    index: PropTypes.number.isRequired, // 序号
    name: PropTypes.string.isRequired, // 物品名称
    count: PropTypes.number.isRequired, // 数量
    majorColor: PropTypes.string, // 主要颜色
    secondaryColor: PropTypes.string // 次要颜色
  }

  static defaultProps = {
    index: 1,
    name: '',
    count: 0,
    majorColor: COLOR_THEME,
    secondaryColor: FONT_COLOR_TITLE
  }

  render() {
    return (
      <View style={{height: 30, flexDirection: 'row'}}>

        {/* 序号 */}
        <View style={{width: 60, justifyContent: 'center', alignItems: 'center'}}>
          <View style={{width: 18, height: 18, justifyContent: 'center', alignItems: 'center', borderRadius: 4, backgroundColor: COLOR_THEME}}>
            <Text style={{fontSize: 12, color: COLOR_WHITE}}>
              {this.props.index}
            </Text>
          </View>
        </View>

        {/* 物品名称*/}
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
          <Text style={{fontSize: 14, color: COLOR_THEME}}>
            {this.props.name}
          </Text>
        </View>

        {/* 数量 */}
        <View style={{width: 40, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 14, color: FONT_COLOR_TITLE}}>
            {this.props.count}
          </Text>
        </View>
      </View>
    )
  }
}